import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hovue/common/values/images.dart';
import 'package:provider/provider.dart';
import 'package:hovue/providers/user_provider.dart';
import 'package:hovue/common/routers/pages.gr.dart';
import 'dart:ui';

@RoutePage()
class RegisterPage extends StatefulWidget {
  const RegisterPage({Key? key}) : super(key: key);

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _confirmPasswordController = TextEditingController();
  
  // 控制当前是第一步还是第二步
  bool _isFirstStep = true;
  
  // 第二步的控制器
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _signatureController = TextEditingController();

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    _confirmPasswordController.dispose();
    _nameController.dispose();
    _signatureController.dispose();
    super.dispose();
  }
  
  // 处理注册
  Future<void> _handleRegister() async {
    final username = _usernameController.text.trim();
    final password = _passwordController.text.trim();
    final nickname = _nameController.text.trim();
    final signature = _signatureController.text.trim();
    
    if (nickname.isEmpty) {
      EasyLoading.showError('nickname is empty');
      return;
    }
    
    EasyLoading.show(status: 'registering...');
    
    final userProvider = Provider.of<UserProvider>(context, listen: false);
    final success = await userProvider.register(
      username: username,
      password: password,
      nickname: nickname,
      signature: signature,
    );
    
    if (success) {
      EasyLoading.showSuccess('register success');
      // 跳转到登录页面
      if (context.mounted) {
        context.router.replace(const LoginRoute());
      }
    } else {
      EasyLoading.showError(userProvider.error ?? 'register failed');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片
          Image.asset(
            Images.register, // 使用注册页面专用图片
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          // 内容
          SafeArea(
            child: _isFirstStep ? _buildFirstStep() : _buildSecondStep(),
          ),
        ],
      ),
    );
  }
  
  // 构建第一步UI
  Widget _buildFirstStep() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 返回按钮
        Padding(
          padding: EdgeInsets.only(left: 16.w, top: 16.h),
          child: GestureDetector(
            onTap: () => context.router.pop(),
            child: Icon(
              Icons.arrow_back_ios_new,
              color: Colors.white,
              size: 30.w,
            ),
          ),
        ),
        // Logo区域
        Expanded(
          flex: 2,
          child: Center(
            child: Padding(
              padding: EdgeInsets.only(top: 20.h),
              child: Image.asset(
                Images.logo3, // 替换为您的应用logo
                width: 120.w,
                height: 120.w,
              ),
            ),
          ),
        ),
        // 输入框区域
        Expanded(
          flex: 4,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 24.w),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 用户名输入框
                ClipRRect(
                  borderRadius: BorderRadius.circular(15.r),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                    child: Container(
                      height: 60.h,
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(15.r),
                        border: Border.all(
                          color: Colors.white.withOpacity(0.3),
                          width: 2.w,
                        ),
                      ),
                      child: Center(
                        child: TextField(
                          controller: _usernameController,
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            color: Colors.white,
                            fontSize: 18.sp,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Username',
                            hintStyle: TextStyle(
                              fontFamily: 'PingFang SC',
                              color: Colors.white.withOpacity(0.7),
                              fontSize: 18.sp,
                            ),
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                
                // 密码输入框
                ClipRRect(
                  borderRadius: BorderRadius.circular(15.r),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                    child: Container(
                      height: 60.h,
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(15.r),
                        border: Border.all(
                          color: Colors.white.withOpacity(0.3),
                          width: 2.w,
                        ),
                      ),
                      child: Center(
                        child: TextField(
                          controller: _passwordController,
                          obscureText: true,
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            color: Colors.white,
                            fontSize: 18.sp,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Password',
                            hintStyle: TextStyle(
                              fontFamily: 'PingFang SC',
                              color: Colors.white.withOpacity(0.7),
                              fontSize: 18.sp,
                            ),
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                
                // 确认密码输入框
                ClipRRect(
                  borderRadius: BorderRadius.circular(15.r),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                    child: Container(
                      height: 60.h,
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.circular(15.r),
                        border: Border.all(
                          color: Colors.white.withOpacity(0.3),
                          width: 2.w,
                        ),
                      ),
                      child: Center(
                        child: TextField(
                          controller: _confirmPasswordController,
                          obscureText: true,
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            color: Colors.white,
                            fontSize: 18.sp,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Confirm Password',
                            hintStyle: TextStyle(
                              fontFamily: 'PingFang SC',
                              color: Colors.white.withOpacity(0.7),
                              fontSize: 18.sp,
                            ),
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 40.h),
                
                // Next按钮
                GestureDetector(
                  onTap: () {
                    // 验证输入
                    final username = _usernameController.text.trim();
                    final password = _passwordController.text.trim();
                    final confirmPassword = _confirmPasswordController.text.trim();
                    
                    if (username.isEmpty) {
                      EasyLoading.showError('username is empty');
                      return;
                    }
                    
                    if (password.isEmpty) {
                      EasyLoading.showError('password is empty');
                      return;
                    }
                    
                    // 验证密码是否匹配
                    if (password != confirmPassword) {
                      EasyLoading.showError('password is not consistent');
                      return;
                    }
                    
                    setState(() {
                      _isFirstStep = false;
                    });
                  },
                  child: Container(
                    height: 60.h,
                    decoration: BoxDecoration(
                      color: const Color(0xFFB27256), // 棕色按钮
                      borderRadius: BorderRadius.circular(15.r),
                    ),
                    child: Center(
                      child: Text(
                        'Next',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.sp,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        
        // 底部服务条款
        Padding(
          padding: EdgeInsets.only(bottom: 20.h),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'By continuing you agree with ',
                  style: TextStyle(
                    fontFamily: 'Inter',
                    color: const Color.fromRGBO(255, 255, 255, 0.6),
                    fontSize: 10.sp,
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    // 跳转到服务条款页面
                  },
                  child: Text(
                    'Terms of Service',
                    style: TextStyle(
                      fontFamily: 'Inter',
                      fontSize: 10.sp,
                      color: Colors.white,
                      decoration: TextDecoration.underline,
                      decorationColor: Colors.white,
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                ),
                Text(
                  ' & ',
                  style: TextStyle(
                    fontFamily: 'Inter',
                    color: const Color.fromRGBO(255, 255, 255, 0.6),
                    fontSize: 10.sp,
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    // 跳转到隐私政策页面
                  },
                  child: Text(
                    'Privacy Policy',
                    style: TextStyle(
                      fontFamily: 'Inter',
                      fontSize: 10.sp,
                      color: Colors.white,
                      decoration: TextDecoration.underline,
                      decorationColor: Colors.white,
                      decorationStyle: TextDecorationStyle.solid,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
  
  // 构建第二步UI
  Widget _buildSecondStep() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 返回按钮
        Padding(
          padding: EdgeInsets.only(left: 16.w, top: 16.h),
          child: GestureDetector(
            onTap: () {
              setState(() {
                _isFirstStep = true;
              });
            },
            child: Icon(
              Icons.arrow_back_ios_new,
              color: Colors.white,
              size: 30.w,
            ),
          ),
        ),
        SizedBox(height: 40.h),
        
        // 标题: Your name
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: Text(
            'Your name',
            style: GoogleFonts.inter(
              color: Colors.white,
              fontSize: 22.sp,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.w900,
            ),
          ),
        ),
        SizedBox(height: 10.h),
        
        // 姓名输入框
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15.r),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: Container(
                height: 60.h,
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(15.r),
                  border: Border.all(
                    color: Colors.white.withOpacity(0.3),
                    width: 2.w,
                  ),
                ),
                child: Center(
                  child: TextField(
                    controller: _nameController,
                    style: TextStyle(
                      fontFamily: 'PingFang SC',
                      color: Colors.white,
                      fontSize: 18.sp,
                    ),
                    decoration: InputDecoration(
                      hintText: 'Name',
                      hintStyle: TextStyle(
                        fontFamily: 'PingFang SC',
                        color: Colors.white.withOpacity(0.7),
                        fontSize: 18.sp,
                      ),
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        SizedBox(height: 30.h),
        
        // 标题: Personalized Signature
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: Text(
            'Personalized Signature',
            style: GoogleFonts.inter(
              color: Colors.white,
              fontSize: 22.sp,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.w900,
            ),
          ),
        ),
        SizedBox(height: 10.h),
        
        // 个性签名输入框
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15.r),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: Container(
                height: 220.h,
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(15.r),
                  border: Border.all(
                    color: Colors.white.withOpacity(0.3),
                    width: 2.w,
                  ),
                ),
                child: TextField(
                  controller: _signatureController,
                  style: TextStyle(
                    fontFamily: 'PingFang SC',
                    color: Colors.white,
                    fontSize: 18.sp,
                  ),
                  maxLines: 3,
                  decoration: InputDecoration(
                    hintText: 'Please use friendly words',
                    hintStyle: TextStyle(
                      fontFamily: 'PingFang SC',
                      color: Colors.white.withOpacity(0.7),
                      fontSize: 18.sp,
                    ),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 16.h),
                  ),
                ),
              ),
            ),
          ),
        ),
        
        const Spacer(),
        
        // 注册按钮
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 24.w),
          child: GestureDetector(
            onTap: _handleRegister,
            child: Container(
              height: 60.h,
              decoration: BoxDecoration(
                color: const Color(0xFFB27256), // 与登录页面相同的棕色按钮
                borderRadius: BorderRadius.circular(15.r),
              ),
              child: Center(
                child: Text(
                  'Register',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),
        ),
        SizedBox(height: 15.h),
        
        // 服务条款和隐私政策
        Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'By continuing you agree with ',
                style: TextStyle(
                  fontFamily: 'Inter',
                  color: const Color.fromRGBO(255, 255, 255, 0.6),
                  fontSize: 10.sp,
                ),
              ),
              GestureDetector(
                onTap: () {
                  // 跳转到服务条款页面
                },
                child: Text(
                  'Terms of Service',
                  style: TextStyle(
                    fontFamily: 'Inter',
                    fontSize: 10.sp,
                    color: Colors.white,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.white,
                    decorationStyle: TextDecorationStyle.solid,
                  ),
                ),
              ),
              Text(
                ' & ',
                style: TextStyle(
                  fontFamily: 'Inter',
                  color: const Color.fromRGBO(255, 255, 255, 0.6),
                  fontSize: 10.sp,
                ),
              ),
              GestureDetector(
                onTap: () {
                  // 跳转到隐私政策页面
                },
                child: Text(
                  'Privacy Policy',
                  style: TextStyle(
                    fontFamily: 'Inter',
                    fontSize: 10.sp,
                    color: Colors.white,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.white,
                    decorationStyle: TextDecorationStyle.solid,
                  ),
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: 20.h),
      ],
    );
  }
}
